<template>
  <div class="classify">
    <h2 class="header">{{title}}</h2>
      <div class="serch" @click="serch">
      <form class="serch-from">
          <van-icon name="search" class="icon"/><div class="input"><span>请输入您需要的物品</span></div>
      </form>
    </div>
    <div class="classify-list">
      <div class="left">
        <li v-for="(item, index) in leftTab" :key="index" :class="ind===index?'active':''" @click="tabs(item.ttype,index)">
          {{item.ttext}}
        </li>
      </div>
      <div class="right">
        <div class="tab">
          <li :class="rightind===0?'on':''" @click="getcontentq()">全部</li>
          <li v-for="(item, index) in rightTab" :key="index"
          :class="rightind===index+1?'on':''"
          @click="getContent(item.sid,index+1)"
          >
            {{item.title}}
          </li>
        </div>
        <div class="content">
          <dl v-for="(item, index) in getcontent" :key="index">
            <dt><img :src="item.img" alt="" @click="detal(item.pid)"></dt>
            <dd>
              <h3>{{item.pname}}</h3>
              <p class="des">{{item.des}}</p>
              <span class="mode">{{item.mode}}</span>
              <p class="price">￥{{item.price}}</p>
              <div class="addcart" @click="addshopcar(item)">
                <van-icon name="shopping-cart-o" />
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
import { mapState } from "vuex";
import {GET_leftTab_LIST,SET_addshopcar_LIST} from '../store/type/index'
import { SortRight,ApiSortRightCon } from "@/api/home";
export default {
  data() {
    return {
      ind:0,
      rightind:0,
      rightTab:[],
      getcontent:[],
      title:""
    }
  },
  methods: {
     detal(pid){
       console.log(pid);
      this.$router.push("/detal/"+pid)
    },
    serch(){
       this.$router.push("/serch")
    },
    async tabs(ttype,index){
      console.log(ttype,index);
      this.ind=index;
       const res = await SortRight(ttype);
       this.rightTab = res.data.data;
       console.log(this.rightTab);
      this.getcontent=this.rightTab[0].children
    },
    async getContent(id,index){
      this.rightind=index;
       const res = await ApiSortRightCon(id);
       this.getcontent = res.data.data;
    },
    getcontentq(){
      this.rightind=0;
    },
    async addshopcar(item){
      this.$store.commit({type:'SET_addshopcar_LIST',payload:item})
    }
   
  },
  mounted(){
       document.title = this.$route.meta.title;
    this.title=document.title
     this.$store.dispatch({ type: GET_leftTab_LIST });
     this.tabs(0,0)
  },
  computed:{
    ...mapState({
      leftTab:(store)=>store.home.leftTab
    })
  }
}
</script>

<style lang="scss">
.classify{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header{
    width: 100%;
    height: .9rem;
    background: #fff;
  }
  .serch{
      width: 100%;
      height: .9rem;
      text-align: center;
      line-height: .9rem;
      background: #fff;
      z-index: 9999999;
      display: flex;
      justify-content: center;
      align-items: center;
      .serch-from{
        width: 95%;
        height: 70%;
        display: flex;
        align-items: center;
        background: #f7f8fa;
        .icon{
          font-size: 23px;
          color: #999;
        }
        .input{
          width: 100%;
          height: 100%;
          border:none;
          background: none;
          padding-left: 10px;
          display: flex;
        align-items: center;
        span{
          color: #999;
        }
        }
      }
  }
  .classify-list{
    height: 88%;
    display: flex;
     .left::-webkit-scrollbar {
      display: none;
    }
    .left{
      width: 25%;
      height: 100%;
      overflow: auto;
      background: #f3f3f3;
      li{
        width: 100%;
        height: 1.2rem;
         display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .right{
      width: 75%;
      height: 96%;
      .tab{
        width: 100%;
        height: .6rem;
        border-bottom: 1px solid #000;
      
        li{
          float: left;
          padding: 0 5px;
          height: 100%;
          line-height: .6rem;
          text-align: center;
        }
      }
      .content{
        width: 100%;
        height: 90%;
        overflow-Y: scroll;
       dl{
        width:100%;
        height: 2rem;
        display: flex;
        margin-top: 10px;
        dt{
          width: 40%;
          height: 100%;
          margin-left: 10px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        dd{
          width: 60%;
          height: 100%;
          padding: 10px;
          position: relative;
          h3{
            width: 90%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .des{
            font-size: 12px;
            color: #9B9B9B;
            margin-top: 6px;
          }
          .mode{
            margin-top: 10px;
            width: 30px;
            height: 18px;
            display: block;
            background: orange;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
          }
          .price{
            font-size: 17px;
            color: red;
            font-weight:600;
          }
          .addcart{
            width: 30px;
            height: 30px;
            background: red;

            position: absolute;
            bottom: 15px;
            right: 10px;
            color: white;
            font-size: 18px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      }
    }
  }
  .active{
    color: orange;
    background:white;
  }
  .on{
    color: orange;
  }
}
</style>